<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>订单页面</title>
    <link href="images/logo2.png" rel="shortcut icon" type="image/x-icon"/>
    <link href="css/order.css" rel="stylesheet" type="text/css"/>
    <link href="layui/css/layui.css" rel="stylesheet" type="text/css"/>

</head>
<body>
<div class="container">
    <div class="head1">
        <div class="layui-row">
            <div class="layui-col-xs1">
                <div class="grid-demo"></div>
            </div>
            <div class="layui-col-xs4">
                <div class="grid-demo grid-demo-bg1">想淘精品好物，就上淘京</div>
            </div>

            <div class="layui-col-xs1">
                <div class="login">
                    <div class="grid-demo grid-demo-bg1" id="classifiction_2">
                        <a href="javascript:void(0)" id="login-reg" onclick="logcheck()"
                           style="margin-top: 5px;">登录/注册</a>
                    </div>
                    <div class="login_check">
                        <div class="userpic"><a href="#"><img src="imgs/购物.png"/></a></div>
                        <div class="userinfo">
                            <div class="username" id="classifiction_2">
                                <a href="javascript:void(0)" id="uname">用户名</a>
                                <h1><a href="javascript:void(0)" onclick="exit()">退出</a></h1>
                            </div>
                            <div class="userid">ID:用户编号:<a href="javascript:void(0)" id="uno">id</a></div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="layui-col-xs1">
                <div class="grid-demo grid-demo-bg1" id="classifiction_2"><a href="#">我的订单</a></div>
            </div>
            <div class="layui-col-xs1">
                <div class="grid-demo grid-demo-bg1" id="classifiction_2"><a href="#">我的淘京</a></div>
            </div>
            <div class="layui-col-xs1">
                <div class="grid-demo grid-demo-bg1" id="classifiction_2"><a href="#">商家服务</a></div>
            </div>
            <div class="layui-col-xs1">
                <div class="grid-demo" id="classifiction_2"><a href="#">关于淘京</a></div>
            </div>
            <div class="layui-col-xs1">
                <div class="grid-demo" id="classifiction_2"><a href="#">企业采购</a></div>
            </div>

        </div>

    </div>
    <div class="head">

        <div class="logo_pic"><a href="index.html"><img src="images/logo2.png"/></a></div>

        <div class="serch">
            <div class="serch_box"><input id="content" name="gname" placeholder="淘入好物，就用淘京" type="text"></div>
            <div class="serch_pic"><a href="javascript:void(0)"><img src="images/serch.png"/></a></div>
        </div>
        <div class="shoppingcart">
            <div class="shoppingcart_pic"><img src="images/shoppingcart.png"/></div>
            <div class="shoppingcart_char"><a href="#"><h1>我的购物车</h1></a></div>
        </div>
    </div>


    <div class="content">
        <div class="content-left">
            <div><h1 class="person-info">我的订单</h1></div>
            <ul class="content-title">
                <li><a class='selected' href="#">我的订单</a></li>
                <li><a class="unselected" href="#">退换/售后</a></li>
                <li><a class="unselected" href="#">收货地址</a></li>
            </ul>
        </div>

        <div class="content-right">
            <div class="person-order">

                <div class="layui-row">
                    <div class="layui-col-md2">
                        <div class="grid-demo grid-demo-bg1" style="margin-left: 5px;">

                            <a class="all selected-title" href="javascript:void(0) ">
                                全部订单
                            </a>
                        </div>
                    </div>
                    <div class="layui-col-md2 ">
                        <div class="grid-demo" style="margin-left: 5px;"><a class="unpay"
                                                                            href="javascript:void(0) ">待付款</a></div>
                    </div>
                    <div class="layui-col-md2">
                        <div class="grid-demo grid-demo-bg1" style="margin-left: 5px;"><a class="unsend"
                                                                                          href="javascript:void(0) ">待发货</a></div>
                    </div>
                    <div class="layui-col-md2">
                        <div class="grid-demo" style="margin-left: -10px;"><a class="unreceived"
                                                                              href="javascript:void(0) ">待收货</a></div>
                    </div>
                    <div class="layui-col-md2">
                        <div class="grid-demo grid-demo-bg1" style="margin-left: -40px;"><a class="completed"
                                                                                            href="javascript:void(0) ">已完成</a>
                        </div>
                    </div>
                    <div class="layui-col-md2">
                        <div class="grid-demo "></div>
                    </div>
                </div>


            </div>
            <div class="good-title">
                <div class="layui-row">
                    <div class="layui-col-md5">
                        <div class="grid-demo grid-demo-bg1" style="margin-left: 10px;">
                            <div class="good">商品</div>
                        </div>
                    </div>
                    <div class="layui-col-md2 ">
                        <div class="grid-demo" style="margin-left: 100px;">
                            <div class="change-all">订单总额</div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="grid-demo grid-demo-bg1" style="margin-left: 110px;">
                            <div class="change-status">订单状态</div>
                        </div>
                    </div>
                    <div class="layui-col-md2">
                        <div class="grid-demo" style="margin-left: 55px;">
                            <div class="change-operate">操作</div>
                        </div>
                    </div>


                </div>
            </div>

            <div class="order-list">
                <div class="order">
                    <div class="order-info">
                        <img class="cover" src="images/logo3.png">
                        <span class="shop">淘京官方旗舰店</span>
                        <span class="order-id">订单号:<span>1001</span></span>
                        <span class="order-time">2023-05-20</span>
                    </div>
                    <div class="order-article">
                        <img src="images/logo1.png">
                        <div class="remark">
                            <span class='good-remark'>测试数据!</span>
                            <span class='good-size'>均码</span>
                        </div>
                        <div class="num">
                            <span> &times;<span class='good-num'>1</span></span>
                        </div>

                        <div class="gname"><span>骆继磊</span></div>
                        <div class="detail">
                            <h1 class="price">&yen<span>49.8</span></h1>
                            <h1 class="status">已完成</h1>
                            <a class="delete" href="#">删除订单</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>


<!--yc-article end-->
<div class="footer" id="footer">
    <p> 关于我们 | 联系我们 | 联系客服 | 合作招商 | 商家帮助 | 营销中心 | 手机京东 | 友情链接 | 销售联盟 | 京东社区 | 风险监测 | 质量公告 | 隐私政策 | 京东公益 | Media & IR</p>

    <p>京公网安备 11000002000088号 | 京ICP备11041704号 | ICP | 药品医疗器械网络服务备案 | 自营医疗器械经营资质 | 药品网络交易第三方平台备案凭证 | 新出发京零 字第大120007号</p>

    <p>互联网出版许可证编号新出网证(京)字150号 | 出版物经营许可证 | 网络文化经营许可证京网文[2020]6112-1201号 | 违法和不良信息举报电话：4006561155</p>

    <p>Copyright © 2004 - 2023 京东JINGDONG 版权所有 | 消费者维权热线：4006067733 | 经营证照 | 医疗器械第三方平台备案凭证（京）网械平台备字（2023）第00013号 | 营业执照
        | 增值电信业务经营许可证</p>

    <p>京东旗下网站： 京东钱包 | 京东云 | 网络内容从业人员违法违规行为举报电话：4006561155-3
    </p>


</div>


</div>


</body>
<script charset="utf-8" src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="js/vue.js"></script>
<script charset="utf-8" src="css/layui/layui.js"></script>

<script>
    // 权限控制
    $(function () {
        $.get("user?op=check", function (rs) {
            console.log(rs);
            if (rs.code == 601) {//暂未登录
                window.location.href = "login.html";
            }
            if (rs.code == 200) {//登录成功
                $("#uname").html(rs.data.user.uname);
                $("#uno").html(rs.data.user.uno);
                $("#login-reg").html("欢迎:" + rs.data.user.uname);
            }
        }, "json");
    });

    function logcheck() {
        $.get("user?op=check", function (rs) {
            console.log(rs);
            if (rs.code == 601) {//暂未登录
                window.location.href = "login.html";
            }
            if (rs.code == 200) {//登录成功
                //到个人中心

            }
        }, "json");
    }

    function exit() {
        $.get("user?op=exit", function (rs) {
            if (rs == 0) {//注销成功
                $("#uname").html('用户名');
                $("#uno").html('');
                $("#login-reg").html('登录/注册');
                localStorage.removeItem('userData');
                window.location.href = "index.html";
            } else {
                alert('退出失败');
            }
        }, "json");
    }
</script>

<script>
    // 	let path=window.location.hash;
    // //	地址必须是detail.html#3
    // 	if(path.indexOf("#")<0){
    //
    // 	//	地址不正确
    // 		window.location.href='index.html';
    // 	}
    //	alert(path)
    // 	let uno=path.substr(1);//获取fno
    var userData = localStorage.getItem('userData');
    userData = JSON.parse(userData);
    let uno = userData.uno;
    let gname = '';//搜索的商品名字
    //订单状态 	ostate='';//所全部订单 1;//待付款 2;//待发货 3;//待收货 4;//完成在支付
    //    6'待退款'  7 退款完成
    let ostate = '';
    var op = 'finds';//请求方法


    function deleteOrder(obj) {

        console.log('delete');
        var orderno = $(obj).closest(".order").find(".order-id span").text();
        var fathers = $(".order");
        $.get("order", {op: "remove", uno: uno, temp02: orderno}, function (rs) {
            if (rs > 0) {
                for (let i = 0; i < fathers.length; i++)
                    if ($(fathers[i]).find(".order-id span").text() == orderno) {
                        fathers[i].remove();
                    }
            }
        }, "json");

    }


    $(".content-title a").click(function () {
        $(".selected").addClass("unselected");
        $(".selected").removeClass("selected");

        $(this).addClass("selected");
        $(this).removeClass("unselected");

        console.log($(".selected").text());
        console.log($(".selected").text() == '退换/售后');
        if ($(".selected").text() == '退换/售后') {
            console.log(12121);

            $(".person-order").hide();
            ostate = 5;
            $(".change-all").text("退款总额");
            $(".change-status").text("全部状态");
            op = 'findreturn';
            start();

            ostate = '';

        } else if ($(".selected").text() == '我的订单') {
            op = 'finds';
            $(".person-order").show();
            start();
        } else if ($(".selected").text() == '收货地址') {

        }
    });

    $(".person-order a").click(function () {
        console.log(this);
        $(".selected-title").addClass("unselected-title");
        $(".selected-title").removeClass("selected-title");
        $(this).addClass("selected-title");
        $(this).removeClass("unselected-title");
        if ($(this).hasClass("all")) {
            ostate = '';//所全部订单
        } else if ($(this).hasClass("unpay")) {
            console.log(1111);
            ostate = 1;//待付款
        } else if ($(this).hasClass("unsend")) {
            ostate = 2;//待发货
        } else if ($(this).hasClass("unreceived")) {
            ostate = 3;//待收货
        } else if ($(this).hasClass("completed")) {
            op = 'findreturn';
            ostate = 4;//完成在支付
            start();
            op = 'finds';
            return;

        }
        console.log(ostate);
        start();
        ostate = '';

    });
    $(".shoppingcart").click(function () {
        location.href = "cart.html#" + this.uno;/*点击结算，跳转到购物车页面，传入用户id*/
    });

    $(".serch_pic").click(function () {
        console.log('serch');
        gname = $(".serch_box input[name='gname']").val();
        console.log(gname);
        start();
        gname = '';
    });

    function start() {
        console.log("start");
        $.get("order", {op: op, uno: uno, gname: gname, ostate: ostate}, function (rs) {
            console.log(rs);
            if ($(".selected").text() == '我的订单') {
                showGoods(rs.data);
            } else if ($(".selected").text() == '退换/售后') {
                showReturn(rs.data);
            }
        }, "json");
    }

    function showGoods(arr) {
        let str = '';
        var ostatus = '';
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].ostate == 1) {
                ostatus = '待付款';
            } else if (arr[i].ostate == 2) {
                ostatus = '待发货';
            } else if (arr[i].ostate == 3) {
                ostatus = '待收货';
            } else if (arr[i].ostate >= 4) {
                ostatus = '已完成';
            }
            var year = arr[i].orderTime.date.year;
            var month = arr[i].orderTime.date.month; // 月份从 0 开始
            var day = arr[i].orderTime.date.day;
            var hour = arr[i].orderTime.time.hour;
            var minute = arr[i].orderTime.time.minute;
            var second = arr[i].orderTime.time.second;
            var nano = arr[i].orderTime.time.nano;

            console.log(year + '-' + month + '-' + day);
            str += '<div class="order"><div class="order-info">' +
                '<img class="cover" src="images/logo3.png"><span class="shop">淘京官方旗舰店</span>' +
                '<span class="order-id" >订单号:<span>' + arr[i].orderno + '</span></span>' +
                '<span class="order-time">' + year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second + ':' + nano + '</span>' +
                '</div><div class="order-article"><img src="images/logo1.png" >' +
                '<div class="remark"><span class="good-remark">' + arr[i].remark + '</span>' +
                '<span class="good-size">' + arr[i].color + '\\' + arr[i].size + '\\' + arr[i].version + '</span></div><div class="num">' +
                '<span> &times;<span class="good-num">' + arr[i].deNum + '</span></span>' +
                '</div><div class="gname"><span>' + arr[i].gname + '</span></div><div class="detail">' +
                '<h1 class="price">&yen<span>' + arr[i].payPrice + '</span></h1><h1 class="status">' + ostatus +
                '</h1><a class="delete" onclick="deleteOrder(this)" href="#">删除订单</a></div></div></div>';

        }
        $(".order-list").html(str);

    }

    function showReturn(arr) {
        let str = '';
        var ostatus = '';
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].ostate == 6) {
                ostatus = '待退款';
            } else if (arr[i].ostate == 7) {
                ostatus = '退款完成';
            }
            var year = arr[i].orderTime.date.year;
            var month = arr[i].orderTime.date.month;
            var day = arr[i].orderTime.date.day;
            var hour = arr[i].orderTime.time.hour;
            var minute = arr[i].orderTime.time.minute;
            var second = arr[i].orderTime.time.second;
            var nano = arr[i].orderTime.time.nano;

            str += '<div class="order"><div class="order-info">' +
                '<img class="cover" src="images/return.png"><span class="shop">淘京官方旗舰店</span>' +
                '<span class="order-id" >订单号:<span>' + arr[i].orderno + '</span></span>' +
                '<span class="order-time">' + year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second + ':' + nano + '</span>' +
                '</div><div class="order-article"><img src="images/logo1.png" >' +
                '<div class="remark"><span class="good-remark">' + arr[i].remark + '</span>' +
                '<span class="good-size">' + arr[i].color + '\\' + arr[i].size + '\\' + arr[i].version + '</span></div><div class="num">' +
                '<span> &times;<span class="good-num">' + arr[i].deNum + '</span></span>' +
                '</div><div class="gname"><span>' + arr[i].gname + '</span></div><div class="detail">' +
                '<h1 class="price">&yen<span>' + arr[i].payPrice + '</span></h1><h1 class="status">' + ostatus +
                '</h1><a class="delete" href="#">进度查询</a></div></div></div>';

        }
        $(".order-list").html(str);


    }

    start();

</script>


</html>
